<div class="touchslider">
    <div class="touchslider-viewport" style=" width:100%; height:0px; overflow:hidden">
    <div>
    	<?php foreach ($this->imgs as $image) {
	?>
			 <div class="touchslider-item">
				<img src="<?php echo $this->baseUrl()."/".$image['image']?>" alt="picture" >
			</div>
	<?php }?>
    </div>
    </div>
</div>

<script>
jQuery(function($) {
    $(".touchslider").touchSlider({
        container: this,
    	duration: 350, // the speed of the sliding animation in milliseconds
    	delay: 3000, // initial auto-scrolling delay for each loop
    	margin: 5, // borders size. The margin is set in pixels.
    	mouseTouch: true,
    	namespace: "touchslider",
    	autoplay: true, // whether to move from image to image automatically
    	viewport: ".touchslider-viewport"
        	});
    var height = $(".touchslider-item:first img").height();
	$(".touchslider-viewport").css("height",height);
	$(".touchslider-viewport").children().css("height",height);
});
$(".touchslider-item img").load(function(){
	var height = $(this).height();
	$(".touchslider-viewport").css("height",height);
	$(".touchslider-viewport").children().css("height",height);
});
$(window).resize( function(){
	var height = $(".touchslider-item:first img").height();
	$(".touchslider-viewport").css("height",height);
	$(".touchslider-viewport").children().css("height",height);
});
</script>